<!--
 * @Descripttion: 
 * @version: 
 * @Author: wjh
 * @Date: 2022-01-11 10:27:16
 * @LastEditors: wjh
 * @LastEditTime: 2022-02-11 17:10:47
-->
<script>

// 需要什么按钮在这里配置
const config = {
  query:{
    text:"查询",
    type:"primary",
  },
  add:{
    text:"新增",
    type:"primary",
    plain: true,
  },
  update:{
    text:"修改",
    type:"text",
    icon:"el-icon-edit",
  },
  delete:{
    text:"删除",
    type:"text",
    icon:"el-icon-delete",
  },
  detail:{
    text:"详情",
    type:"text",
    icon:"el-icon-more",
  },
  confirm: {
    text:"确定",
    type:"primary",
  },
}

// 下面是源代码，不需要动
export default{
  props:{
    mode:String,
  },
  data(){
    return{
    }
  },
  render: function (createElement) {//render渲染函数==模板创建HTML，比模板更接近编译器
    const mode = this.mode 
    let text;

    text = config[mode]?.text|| ''//  ||为假则为后者，&&为真则为前者

    let attrs = {...config[mode]}//不这样处理所有属性事件等都无法绑定
    delete attrs.text
    delete attrs.class


    let btn = createElement(//createElement包含vue页面渲染的所有节点，包括子节点的描述信息==虚拟节点，接受三个参数
      'el-button', //第一个参数：一个 HTML 标签名、组件选项对象，或者resolve 了上述任何一种的一个 async 函数，必选
      {//第二个参数：一个与模板中 attribute 对应的数据对象，可选  
        class:config[mode]?.class,//拿到类名
        on:this.$listeners,//$listeners：除了prop、attrs以外的所有事件（v-on监听）
        attrs:{
          ...attrs,
          ...this.$attrs,//$attrs:除了prop以外所有传递的属性例如class、style（v-bind监听）
        },
      },
      [// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选。
        this.$slots.default && text,//所有elementui中的标签内部都有slot插槽，如果没有插槽名就默认为default否则为text， this.$slots 访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)
        //default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容,在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助，通过 this.$slots 访问静态插槽的内容
      ]
      )
    return btn
  },
  methods:{
    //----------普通方法-----------

    //----------点击事件-----------
    
    //----------接口方法-----------
  }
}
</script>